<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
 <style>
     *{margin: 0px;
       padding: 0px;
       list-style: none;

     }
     
   .header{
       position: relative;
       right: 0px;
       top: 0px;
      height: 38px;
       
   }

    .nav{
        height: 600px;
        width: 642px;
        
        margin: 30px auto 23px auto;
    }


    .con{
        width: 630px;
        height: 100px;
        margin: 20px auto;
        
    }



  .header ul{float: right;
            margin-right: 100px;
            position: absolute;
            top: 0px;
            right: 0px;}
  .header li{float: left;
               margin: 12px 20px 0px 0px;
           
              
               }


   .header li a{color: #4c505f;
   font-size: 15px;}
  
 
   .header span{width: 62px;
                    height: 24px;
                background: #3388ff;
                float: right;    
                margin-top: 10px;  
                position: absolute;
                top: 0px;
            right: -50px;
   }

.header span a{ 
    line-height: 24px;
    color: white;
    font-size: 10px;
    text-decoration: none;
    margin-top: 15px; 
    padding-left: 7px;
}


.nav li{margin: 0px  0px 0px 55px;}

.nav  li  img{
           margin: 0px  auto 0px auto;
          
           
           
           }

           input{border: 1px solid #c4c7ce;
              width: 540px;
               height: 37px;
               margin-top: 25px;       

               background: url(images/camera_new_5606e8f.png) no-repeat  508px    17px ;     
              }



            
    
                 
    .nav p{background:#3388ff ;
             width: 80px;
             height: 40px;
     line-height: 40px;
     padding-left: 15px;
     margin-left: 542px;
     margin-top: -40px;
    }
    
   .nav p a{text-decoration: none;
          color: white;}






    
   .foot{
          text-align: center; 
          margin-left: 50px; 
          margin-top: -30px ;  
          
   }
   .foot img{margin: 205px 100px 0px 50px;
       
   }
  .foot p{background: white;
     color: #4c4c4c;
     font-size: 14px;
     margin-top: -15px;
     margin-left:215px;
  }
 
 .con li{
         font-size: 14px;
         float: left;
        margin-right: 62px; 
        margin-bottom: 14px;    
      margin-left: 0px;
 }

   .con ul{
       float: right;
   }



 
 .con a{
     color:#9e9e9e ;
 }
 
.bottom ul{
    margin-top: -5px;
}


 .bottom li{
     float: left;
     margin-left: 0px;
     margin-right: 10px;
 }

 
 .bottom p{background: white;
           font-size: 14px;
          
          }


 .bottom span{ 
     margin-left: -9px;
     margin-right: 10px;
     color: #9e9e9e;
 }

.navone li img { 

     margin-left: 100px;

}
 </style>


    </head>

    <body>
        <div class="header">
            <ul>
                <li><a href="">糯米</a></li>

                <li><a href="">新闻</a></li>

                <li><a href="">hao123</a></li>

                <li><a href="">地图</a></li>

                <li><a href="">视频</a></li>
                <li><a href="">贴吧</a></li>
                <li><a href="">登录</a></li>
                <li><a href="">设置</a></li>
              <span><a href="">更多产品</a></span>
             
            </ul>
             
          


        </div>
       



        <div class="nav">
          <ul>
              <li class="navone" ><img  src="images/baidu_jgylogo3.gif" alt=""  style="margin-left: 175px;  widows: 150 px; height: 60px;"></li>

              

              
          </ul>
         <input type="text"> 
       
       
         
           <p> <a href="">百度一下  </a></p>
       
       
         <div class="foot">
             <img src="images/zbios_efde696.png" alt="">
              <p>手机百度</p>
            </div>


        
        <div class="con">
       <ul> <li>
            <a href="">把百度设为主页</a>
        </li>
       <li>
           <a href="">关于百度</a>
       </li>
  
       <li><a href="">About   Baidu</a></li>

       <li>
            <a href="">百度推广</a>
       </li>
</ul>



       <div class="bottom">
         <ul>
        <li><span>©2016 百度</span></li>
              
           
            
            
               
              <li><a href="">使用百度前必读</a></li>
          
           
               <li><a href="">意见反馈</a></li>

           
        <li>
           <span>京ICP证030173号</span>   
                <b><img src="images/d1.jpg" alt="" width="10px" height="15px"></b>
           </li>

                 <li>
                    <a href=""> 
                         京公安备网11000002000001号 </a> 
                         <b><img src="images/d2.jpg" alt="" width="10px" height="14px"></b>
                 </li>           
           </ul>
       </div>
        </div>
         

    </body>
    </html>